<template>
    <div class="header">
        <!-- <div class="let-el">按钮</div>

        <div class="center-el"><input type="text" name="" id=""></div>
        
        <div class="right-el">登录</div> -->

        <!-- slot 插槽  是一个内置组件 -->
        <!-- slot 可以接受组件中间的结构 -->
        <!-- 给插槽slot 起个名字就是具名插槽 -->
        <slot :games="games"></slot>
    </div>
</template>

<script>
export default {

    data() {
        return {
            games:['火锅','烤肉','牛排','小龙虾']
        };
    },

    mounted() {
        
    },

    methods: {
        
    },
};
</script>

<style lang="scss" scoped>
.header{
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.let-el{
    width: 40px;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-content: center;
}
.center-el{
    width: calc(100% - 110px);
    height: 50%;
    display: flex;
    margin-top: -23px;
    justify-content: space-around;
    align-content: center;
}
.right-el{
    width: 40px;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-content: center;
    margin-left: 20px;
}
</style>